<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3D 学习</title>
	<style type="text/css">
	
	.box{
		position: relative;
		width: 200px;
		height: 200px;
		margin: 200px auto;
		-webkit-transform-style: preserve-3d;
		/*-webkit-transform: rotateX(30deg) rotateY(-60deg);*/
        -webkit-animation: shang 3s linear infinite;
        -webkit-transform-origin: 100px 100px 0px;
	}

    .face{
    	position: absolute;
    	left: 0;
    	top: 0;
    	display: inline-block;
    	width: 200px;
    	height: 200px;
    	outline: #000 solid 1px;
    	font-size: 100px;
    	line-height: 200px;
    	text-align: center;
    	
    	background: -webkit-linear-gradient(
                left,
                rgba(54, 226, 248, 0.5) 0px,
                rgba(54, 226, 248, 0.5) 3px,
                rgba(0, 0, 0, 0) 0px),
        -webkit-linear-gradient(
                top,
                rgba(54, 226, 248, 0.5) 0px,
                rgba(54, 226, 248, 0.5) 3px,
                rgba(0, 0, 0, 0) 0px);
    }
    
    .face:nth-child(1){
    	-webkit-transform: rotateX(90deg) translateZ(100px);
    }
    
    .face:nth-child(2){
    	-webkit-transform: rotateX(270deg) translateZ(100px);
    }
    
    .face:nth-child(3){
    	-webkit-transform: rotateY(270deg) translateZ(100px);
    }
    
    .face:nth-child(4){
    	-webkit-transform: rotateY(90deg) translateZ(100px);
    }
    
    .face:nth-child(5){
    	-webkit-transform: translateZ(100px);
    }
    
    .face:nth-child(6){
    	-webkit-transform: rotateY(180deg) translateZ(100px);
    }
    
    .faceExtra{
    	position: absolute;
    	left: 0;
    	top:0 ;
    	text-align: center;
    	line-height: 200px;
    	width: 200px;
    	font-size: 100px;
    	font-weight: bold;
    	color: #000000;
    	outline: #000000 solid 1px;
    	background-color: mistyrose;
    	-webkit-animation: shang 3s linear infinite;
    }
    
    @-webkit-keyframes shang{
    	to{
    		-webkit-transform: rotateX(90deg) rotateY(90deg) translateZ(0);
    	}
    	form{
    		-webkit-transform:  rotateX(360deg) translateZ(100);;
    	}
    }
	
	
     

	</style>
</head>
<body>
   <h2 align=center>3D 学习</h2>
	   <div class="box">
	   	  <span class="face">上</span>
	   	  <span class="face">下</span>
	   	  <span class="face">左</span>
	   	  <span class="face">右</span>
	   	  <span class="face">前</span>
	   	  <span class="face">后</span>
	   	  <!--<span class="faceExtra">上</span>-->
	   </div>
</body>
</html>